<template>
	<div id="join">
		<!-- <el-carousel :interval="4000" type="card" height="20rem" class="lunbotu">
			<el-carousel-item class="top-img" v-for="(item, index) in imag" :key="index"><img :src="item.imageurl" /></el-carousel-item>
		</el-carousel> -->
		<div class="toplun">
		<el-carousel :interval="4000" type="card" height="20rem" class="lunbotu">
		<el-carousel-item v-for="(item, index) in imag" :key="index"><img :src="item.imageurl" class="zhiyuan-img" /></el-carousel-item>
		</el-carousel>
		</div>
		<div class="jiaru-box">
			<div class="jiaru-top">
				<h1>团队介绍</h1>
				<div class="h1line"></div>
				<div class="top-left"><img src="../assets/img/团队6.jpg" alt="" /></div>
				<div class="top-right">
					<div class="pline"></div>
					<div class="p1">
						志愿吧（ZHIYUANBA）是一家极具潜力且非常年轻充满朝气的志愿公司。公司于2021年在10-452正式成立。目前第一款作品《志愿吧》已于2021年5月上线。未来，志愿吧仍然会继续倾注创作热情，致力于制作出充满挑战乐趣与拥有艺术价值的网站。
						<br />
						<br />
						我们在构建完整且独一无二的“世界”道路上继续前进，希望热爱志愿与前卫创作的你一起加入！
					</div>
				</div>
			</div>
			<div class="jiaru-center">
				<h1>招募人才</h1>
				<div class="h1line"></div>
				<div class="center-box-l">
					<h3>美术类</h3>
					<p>共需2位</p>
				</div>
				<div class="center-box-r">
					<h3>后端开发</h3>
					<p>共需2位</p>
				</div>
			</div>
			<div class="jiaru-buttom">
				<h1>QQ扫描下方二维码加入我们</h1>
				<div class="h1line"></div>
				<img src="@/assets/img/二维码.png" alt="#" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Join',
	data() {
		return {
			imag: [
				{ imageurl: require('../assets/img/团队1.jpg') },
				{ imageurl: require('../assets/img/团队2.jpg') },
				{ imageurl: require('../assets/img/团队3.jpg') },
				{ imageurl: require('../assets/img/团队4.jpg') }
			],
			jbanners: [require('@/assets/img/denglu.jpg'), require('@/assets/img/denglu.jpg')]
		};
	}
};
</script>

<style scoped>
.join{
	width: 100%;
	margin: auto;
}
.jiaru-box {
	width: 1200px;
	margin: 50px auto 0;
}
.jiaru-box h1 {
	text-align: center;
	font-weight: 400;
}
.h1line {
	height: 1px;
	background-color: rgba(0, 0, 0, 0.05);
	width: 100px;
	margin: auto;
}
.jiaru-top {
	height: 400px;
}
.top-left img {
	position: relative;
	width: 500px;
	height: 300px;
}
.top-right {
	position: relative;
	width: 600px;
	height: 270px;
	left: 550px;
	top: -280px;
}
.pline {
	height: 1px;
	background-color: rgba(0, 0, 0, 0.05);
	width: 50px;
	margin-top: 40px;
	margin-bottom: 20px;
}
.p1 {
	font-size: 20px;
	color: rgb(128, 128, 128);
}
.jiaru-center {
	background-color: rgba(0, 0, 0, 0.05);
	height: 350px;
}
.jiaru-center h1 {
	padding-top: 30px;
}
.center-box-l {
	width: 220px;
	height: 160px;
	background-color: white;
	display: inline-block;
	margin-top: 30px;
	margin-left: 325px;
	margin-right: 100px;
}
.jiaru-center h3 {
	padding-top: 30px;
	text-align: center;
	color: rgba(0, 0, 0, 0.8);
	font-size: 20px;
	font-weight: 400;
}
.jiaru-center p {
	margin: 30px auto 0;
	text-align: center;
	background-color: black;
	height: 30px;
	width: 100px;
	font-size: 14px;
	line-height: 30px;
	color: rgba(249, 249, 250, 1);
}
.jiaru-center p:hover {
	cursor: pointer;
	opacity: 0.8;
}
.center-box-r {
	width: 220px;
	height: 160px;
	display: inline-block;
	background-color: white;
}
h1 {
	margin-top: 30px;
}
.jiaru-buttom img {
	display: block;
	margin: auto;
	width: 200px;
	height: 200px;
	margin-top: 20px;
	margin-bottom: 40px;
}
.top-img{
	height: 100%;
	width: 100%;
}
.lunbotu{
	justify-content: ;
}
</style>
